<template>
  <xn-form-container
    :title="formData.ID ? '编辑生产批次' : '新增生产批次'"
    :width="550"
    :visible="visible"
    :destroy-on-close="true"
    @close="onClose"
  >
    <a-form
      style="height: 100vh; overflow: auto"
      ref="formRef"
      :model="formData"
      :rules="formRules"
      layout="vertical"
    >
      <a-form-item label="批次名称" name="PBName">
        <a-input
          v-model:value="formData.PBName"
          placeholder="请输入批次名称"
          allow-clear
        />
      </a-form-item>
      <a-form-item label="产品订单编号" name="PBNo">
        <a-input
          v-model:value="formData.PBNo"
          placeholder="请输入产品订单编号"
          allow-clear
        />
      </a-form-item>
      <a-form-item label="创建时间" name="time">
        <a-range-picker
          style="width: 100%"
          v-model:value="formData.time"
          showTime
          :format="dayFormat"
        />
      </a-form-item>

      <a-form-item label="生产批次说明" name="PBDesp">
        <a-input
          v-model:value="formData.PBDesp"
          placeholder="请输入生产批次说明"
          allow-clear
        />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button class="xn-mr8 mr10" @click="onClose">关闭</a-button>
      <a-button type="primary" @click="onSubmit">{{
        formData.ID ? "确认修改" : "确认新增"
      }}</a-button>
    </template>
  </xn-form-container>
</template>

<script setup>
import { required } from "@/utils/formRules";
import productbatchmgrApi from "@/api/productManagement/productbatchmgrApi";
import XnFormContainer from "@/components/XnFormContainer/index.vue";
import dayjs from "dayjs";
import {
  transitionTime,
  getPreviousMonthDateTime,
  getCurrentDateTime,
} from "@/utils/time.js";
import { message } from "ant-design-vue";
const dayFormat = "YYYY/MM/DD HH:mm:ss";

// 默认是关闭状态
const visible = ref(false);
const emit = defineEmits({ successful: null });
const formRef = ref();

// 表单数据
const formData = ref({
  time: [],
});
// 打开抽屉
const onOpen = (record) => {
  visible.value = true;
  if (record) {
    formData.value = Object.assign({}, record);
    formData.value.time = [
      dayjs(transitionTime(record.PBBeginTime), dayFormat),
      dayjs(transitionTime(record.PBEndTime), dayFormat),
    ];
  } else {
    formData.value = {};
  }
};
// 关闭抽屉
const onClose = () => {
  formRef.value.resetFields();
  visible.value = false;
};

// 默认要校验的
const formRules = {
  PBName: [required("请输入批次名称")],
  PBNo: [required("请输入产品订单编号")],
  time: [required("请选择生产批次起始时间")],
};

// 验证并提交数据
const onSubmit = () => {
  // 有ID 则为修改，无ID为新增
  if (formData.value.ID) {
    formRef.value
      .validate()
      .then(() => {
        productbatchmgrApi
          .modifyProductBatch({
            ID: formData.value.ID,
            PBName: formData.value.PBName,
            PBNo: formData.value.PBNo,
            PBBeginTime: dayjs(formData.value.time[0]).format(dayFormat),
            PBEndTime: dayjs(formData.value.time[1]).format(dayFormat),
            PBDesp: formData.value.PBDesp ? formData.value.PBDesp : "",
          })
          .then(() => {
            onClose();
            message.success("修改成功");
            emit("successful");
          });
      })
      .catch(() => {});
  } else {
    formRef.value
      .validate()
      .then(() => {
        productbatchmgrApi
          .addProductBatch({
            PBName: formData.value.PBName,
            PBNo: formData.value.PBNo,
            PBBeginTime: dayjs(formData.value.time[0]).format(dayFormat),
            PBEndTime: dayjs(formData.value.time[1]).format(dayFormat),
            PBDesp: formData.value.PBDesp ? formData.value.PBDesp : "",
          })
          .then(() => {
            onClose();
            message.success("新增成功");
            emit("successful");
          });
      })
      .catch(() => {});
  }
};

// 调用这个函数将子组件的一些数据和方法暴露出去
defineExpose({
  onOpen,
});
</script>
